<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<div class='panel'>
	<table class='title' cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td class='left'></td>
			<td class='middle'>
				门店分布
			</td>
			<td class='right'></td>
		</tr>
	</table>
	<div class='content'>
		<form id="entSearchForm" name="entSearchForm" method="post" onsubmit="return false;">
			<div class='buttonPanel '>
				<s:checkbox name="chargeStation" id="checkbox_chargeStation" cssStyle="width: 10px;"></s:checkbox>
				充电站
				<s:checkbox  name="weixiu" id="checkbox_weixiu" cssStyle="width: 10px;"></s:checkbox>
				维修服务店
				<s:checkbox  name="xiaoshou" id="checkbox_xiaoshou" cssStyle="width: 10px;"></s:checkbox>
				整车销售店
				<a class="k-button" onclick="queryMendDistibution();"><span class="k-icon k-i-search"></span>查询</a>
			</div>
		</form>
		<hr>
		<div id='entTable' class='tablePanel'>
		<table style="width: 100%;">
		<tr><td>
			<div id='map' style="height: 450px;"></div></td></tr>
			<tr><td>
			<div id='DistriTable'>
			</div>
			</td></tr>
			</table>
		</div>
	</div>
</div>
<style>
.amap-logo {
	display: none;
}
.amap-icon{
overflow: none;
}
.list{margin:15px auto; width:100%;}  
.list li.columnhead{font-size: 14px;font-weight:bold;border: 1px solid;}  
.list li,.list li.columnhead{  
    width:24%;line-height: 30px;height: 30px;text-align:center;float:   
    left;margin:0 0 1px 1px;list-style:none;  
}  
</style>
<script id="DistriTableData" type="text/html">
<ul class="list">  
{{each list as value i}}
<li class="columnhead">{{value.province}}</li>  
<li class="columnhead">{{value.totalNum}}</li>
{{/each}}
</ul> 
</script>
<script>
var mendsJson = ${mendsJson};
var distrJson=${distrJson};
if(null!=distrJson){
	if(null!=distrJson&&distrJson.length>0){
		var r ={list: distrJson};
		var html = template('DistriTableData', r);
		document.getElementById('DistriTable').innerHTML = html;
	}
}

var mapObj;
var markers=[];
var cluster;
var point;
var infowindowFocus;
var points = new Array();
var infowindows = new Array();
_lat=32.016227;
_lng=108.593587;
mapObj=new AMap.Map("map",{view: new AMap.View2D({center:new AMap.LngLat(_lng, _lat),zoom:4})});  
mapObj.plugin(["AMap.ToolBar"],function(){ var toolBar = new AMap.ToolBar();mapObj.addControl(toolBar);});
AMap.event.addListener(mapObj,"click",function(e){if(infowindowFocus){infowindowFocus.close();}});
for ( var i = 0; i < mendsJson.length; i = i + 1) {
	var html="";
	html += "<table style='font-size:12px;border:0px;'><tr><td style='width:100px;'>门店名称：</td><td style='width:70%;text-align:left;'><b style='font-size:14px;color=#000;'>"+ mendsJson[i].name+ "</b></td></tr>";
	html += "<tr><td style='vertical-align: top;'>门店地址：</td><td>"+ mendsJson[i].address+ "</td></tr>";
	html += "<tr><td style=''>门店电话：</td><td>"+ mendsJson[i].lxrTel+ "&nbsp;&nbsp;&nbsp;&nbsp; </td></tr>";		
	html += "</table>";
	points[i] = new AMap.LngLat(mendsJson[i].longitude,mendsJson[i].latitude);
	
        var marker = new AMap.Marker({
            position:points[i],
            icon:"http://developer.amap.com/wp-content/uploads/2014/06/marker.png", 
            offset:{x:-8,y:-34}
        });
        markers.push(marker);
    infowindows[i] = new AMap.InfoWindow({content:html,size:new AMap.Size(250,130)}); 
    addEvent(marker,mendsJson[i].longitude,mendsJson[i].latitude, infowindows[i],mapObj,mendsJson[i].address,mendsJson[i].id,i,mendsJson[i].name,mendsJson[i].lxr,mendsJson[i].lxrTel);
}
addCluster(0);
function addCluster(tag)
{
    if(cluster) {  
        cluster.setMap(null);
    }
    if(tag==1) {
        var sts=[{url:"http://developer.amap.com/wp-content/uploads/2014/06/1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
            {url:"http://developer.amap.com/wp-content/uploads/2014/06/2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
            {url:"http://developer.amap.com/wp-content/uploads/2014/06/3.png",size:new AMap.Size(48,48),offset:new AMap.Pixel(-24,-45),textColor:'#CC0066'}];
             mapObj.plugin(["AMap.MarkerClusterer"],function(){
             cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
        });
    }
    else {
        mapObj.plugin(["AMap.MarkerClusterer"],function(){
            cluster = new AMap.MarkerClusterer(mapObj,markers);
        });
    }
}
function addEvent(marker,longitude,latitude, infowindow,mapObj,address,id,i,name,lxr,lxrTel)
{
	AMap.event.addListener(marker,"click",function(){
	infowindow.open(mapObj,new AMap.LngLat(longitude,latitude));
	infowindowFocus=infowindows[i];
	});
}
</script>